<template>
  <div class="problem-solve">
    <h2>ProblemSolve views</h2>
    <el-container>
      <el-main>
        <el-row :gutter="20">
          <el-col :span="12">
            <problem-description
              @deliverProblem="setProblem"
            ></problem-description>
          </el-col>
          <el-col :span="12">
            <problem-code-panel ref="problemCodePanel"> </problem-code-panel>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import ProblemDescription from "@/components/Problem/ProblemDescription.vue";
import ProblemCodePanel from "@/components/Problem/ProblemCodePanel.vue";
export default {
  name: "ProblemSolve",
  components: {
    ProblemDescription,
    ProblemCodePanel,
  },
  methods: {
    setProblem(problem) {
      this.$refs["problemCodePanel"].setProblem(problem);
    },
  },
};
</script>

<style>
</style>